<template>
  <div class="echarts">
    <div class="unit">单位：元</div>
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="lineChart">
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: false,
    default: () => []
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  },
  name: {
    type: String,
    required: false,
    default: ""
  },
  typeList: {
    type: Array,
    required: false,
    default: () => []
  }
});

const option: any = reactive({
  // title: {
  //   text: "Stacked Area Chart",
  //   textStyle: {
  //     color: "#a1a1a1"
  //   }
  // },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    data: []
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  grid: {
    left: "3%",
    right: "3%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      axisLabel: {
        color: "#a1a1a1"
      },
      axisTick: { show: false }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#a1a1a1"
      }
    }
  ],
  series: [
    {
      name: "华三云",
      type: "line",
      stack: "Total",
      areaStyle: {},
      emphasis: {
        focus: "series"
      },
      data: []
    }
  ]
});

const setOption = () => {
  const data: any = props.data || [];
  const type: any = props.typeList || [];
  option.legend.data = type.map(a => a.name);
  option.xAxis[0].data = data.map(a => a.name);
  const list: any = [];
  type.forEach(item => {
    list.push({
      name: item.name,
      type: "line",
      stack: "Total",
      areaStyle: {},
      emphasis: {
        focus: "series"
      },
      data: data.map(a => a[item.value])
    });
  });
  option.series = list;
  if (props.colorList && props.colorList.length) {
    option.color = props.colorList;
  }
};
watch(
  () => props.data,
  () => {
    setOption();
  }
);

onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  position: relative;
  width: 100%;
  height: 100%;
  .unit {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    color: var(--el-text-color-primary);
  }
}
</style>
